<template>
    <!-- 观众组件 -->
    <view v-if="audience" class="audience-box">
        <view style="height: 864rpx;padding: 30rpx;position: relative;width: 750rpx;">
            <!-- 标题 -->
            <view
                style="display: flex;justify-content: center;position: relative;height: 31rpx;line-height: 31rpx;margin: 20rpx 0 54rpx;">
                <text style="color: #000;font-weight: bold;font-size: 32rpx;text-align: center;">在线观众</text>
                <view style="width: 31rpx;height: 31rpx;position: absolute;right: 0rpx;" @click="close">
                    <image class="mg" src="../../../static/live/guanbi.png" mode="scaleToFill" />
                </view>
            </view>
            <!-- 列表 -->
            <view class="list-content">
                <view class="list-item" v-for="(item, index) in userList" :key="index">
                    <view style="width: 60rpx;height: 60rpx;position: relative;">
                        <image v-if="index == 0" class="mg" src="../../../static/live/one.png" mode="scaleToFill" />
                        <image v-if="index == 1" class="mg" src="../../../static/live/two.png" mode="scaleToFill" />
                        <image v-if="index == 2" class="mg" src="../../../static/live/three.png" mode="scaleToFill" />
                        <view
                            style="position: absolute; top: 47%; left: 50%; transform: translate(-50%, -50%); color: #fff; font-size: 26rpx;">
                            {{ index + 1 }}</view>
                    </view>
                    <view style="margin: 0 30rpx;width: 80rpx;height: 80rpx;border-radius: 50%;">
                        <image style="width: 80rpx;height: 80rpx;background-color: green;" src="../../../static/live/touxiang.png" mode="scaleToFill" />
                    </view>
                    <view style="font-size: 30rpx;background-color: red;">{{ item.user.nickName }}</view>
                </view>
                <!--  -->
            </view>
        </view>
        <view
            style="width: 750rpx;height: 130rpx; display: flex;flex-direction: row; color: #000;align-items: center;padding-left: 30rpx;padding-bottom: 15rpx; position: fixed;bottom: 0;box-shadow: 0rpx 0rpx 27rpx 0rpx #DBDBDB;background-color: #fff;">
            <view style="width: 60rpx;height: 60rpx;position: relative;">
                <view
                    style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: #000; font-size: 26rpx;">
                    11
                </view>
            </view>
            <view style="margin: 0 30rpx;width: 750rpx;height: 80rpx;border-radius: 50%;">
                <image style="width: 80rpx;height: 80rpx;" :src="obj.avatarUrl" mode="scaleToFill" />
            </view>
            <view style="width: 100rpx;height: 100rpx; background-color: red; font-size: 30rpx;">{{ 123456 }}</view>
        </view>
    </view>
</template>

<script>
export default {
    props: {
		room_id:{
			type:String,
			default:''
		},
        audience: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            userList: [], // 观众列表
            live_id: 1, // 直播间id
            obj: {}
        }
    },
    watch: {
        audience: {
            immediate: true,
            handler(newVal) {
                if (newVal) {
                    this.getLiveUserList(this.live_id);
                }
            }
        }
    },
    methods: {
        close() {
            console.log(111)
            this.$emit("closeAudience")
        },
        async getLiveUserList(index) {
			var res = await uni.$api.user.audience({
                    live_id: this.room_id
                })
				
				
				console.log(11111111,res);
				return false
            uni.request({
                url: 'http://qcdj.ascetic.top/index.php?i=666&m=longbing_massages_city&s=api/appuser/user/userlistlive', // 接口地址
                method: 'POST', // 请求方法
                header: {
                    autograph: "8187c2fd865923857d50439e08cc1894"
                },
                data: {
                    live_id: 1
                },
                success: (res) => {
                    // console.log(res.data.data, '观众列表'); // 打印响应数据
                    this.userList = res.data.data.sort((a, b) => {
                        return b.fid - a.fid
                    })
                    let obj = this.userList.filter(item => {
                        return item.user.id == 5
                    })
                    this.obj = obj[0].user
                    console.log(this.userList, '观众列表')
                },
                fail: (err) => {
                    console.error(err, '观众列表'); // 打印错误信息
                }
            });
        }
    }
}
</script>

<style lang="scss" scoped>
// 公共图片样式
.mg {
    width: 60rpx;
    height: 60rpx;
    background-color: aqua;
}

// 整体盒子
.audience-box {
    width: 750rpx;
    height: 846rpx;
    position: fixed;
    bottom: 0;
    background-color: #fff;
    border-radius: 30rpx 30rpx 0rpx 0rpx;
}

/* 标题 */
/* 列表 */
.list-content {
    height: 564rpx;
    overflow-y: scroll;
}

.list-item {
    display: flex;
    flex-direction: row;
    color: #000;
    align-items: center;
    margin: 40rpx 0;
}
</style>